<script>
import VehicleBasicInfo from '@/views/vehicle/vehicleList/components/vehicleDetail/components/vehicleBasicInfo.vue'
import VehicleBasicForm from '@/views/vehicle/vehicleList/components/vehicleDetail/components/vehicleBasicForm.vue'

export default {
  name: 'vehicleDetail',
  data() {
    return {
      edit: false,
      detail: {}
    }
  },
  methods: {
    /*
    *
    * 获取车辆详情的回调函数
    *  */
    async fetchVehicleDetail() {
      try {
        const detail = await this.$store.dispatch('vehicleListStore/fetchVehicleDetailAction', this.id)
        this.detail = detail
      } catch (error) {
        this.$message.error(error.message)
      }
    },

    /*
    *
    *
    *  */
    handleEditInfo() {
      this.edit = true
    },
    /*
    *
    *  */
    handleCancelInfo() {
      this.edit = false
    },

    /*
    *
    *
    *  */
    async handleSaveBasicInfo() {
      try {
        const editResult = await this.$store.dispatch('vehicleListStore/updateVehicleAction', this.$refs.vehicleBasicFormRef.formData)
        await this.fetchVehicleDetail()
        this.edit = false
        this.$message.success(editResult)
      } catch (error) {
        this.$message.error(error.message)
      }
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    }
  },
  mounted() {
    this.fetchVehicleDetail()
  },
  components: { VehicleBasicForm, VehicleBasicInfo }

}
</script>

<template>
  <div class="vehicle-detail">

    <el-tabs>
      <el-tab-pane label="基本信息">
        <vehicle-basic-info :detail="detail" v-if="!edit"></vehicle-basic-info>
        <vehicle-basic-form ref="vehicleBasicFormRef" v-else></vehicle-basic-form>
        <div class="edit-btn" v-if="!edit">
          <el-button type="primary" icon="el-icon-edit" @click="handleEditInfo">编辑</el-button>
        </div>
        <div class="edit-btn" v-else>
          <el-button @click="handleCancelInfo">取消</el-button>
          <el-button type="primary" @click="handleSaveBasicInfo">保存</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="行驶证信息">

      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<style scoped lang="scss">
.vehicle-detail {
  padding: 20px;
  margin: 20px;
  background: #fff;

  ::v-deep .el-tab-pane {
    position: relative;
    height: 550px;

    .edit-btn {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 20px;
    }
  }

  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    background-color: #eedcdc;
  }
}
</style>
